<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>Neon | Modals</title>
	

	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js} IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	
</head>
<body class="page-body" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

	<div class="sidebar-menu">
		<header class="logo-env">
			<!-- logo -->
			<div class="logo">
				<a th:href="@{/api/index}">
					<img th:src="@{/picture/logo-2x.png}" width="120" alt="">
				</a>
			</div>
			<div class="sidebar-collapse">
				<a href="#" class="sidebar-collapse-icon with-animation">
					<!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
					<i class="entypo-menu"></i>
				</a>
			</div>
			<div class="sidebar-mobile-menu visible-xs">
				<a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
					<i class="entypo-menu"></i>
				</a>
			</div>
		</header>
		<ul id="main-menu" class="">
			<!--用户管理-->
			<!--th:if="${session.list.contains('admin')} and ${session.list.contains('manager')}"-->
			<li th:if="${session.list.contains('admin')} and ${session.list.contains('manager')}">
				<a th:href="forms-main.html">
					<i class="entypo-doc-text"></i>
					<span>用户管理</span>
				</a>
				<ul>
					<li>
						<a th:href="@{/api/users}">
							<span>用户列表</span>
						</a>
					</li>
				</ul>
			</li>
			<!--角色管理-->
			<li th:if="${session.list.contains('admin')}">
				<a th:href="forms-main.html">
					<i class="entypo-doc-text"></i>
					<span>角色管理</span>
				</a>
				<ul>
					<li>
						<a th:href="@{/api/roles}">
							<span>角色列表</span>
						</a>
					</li>
				</ul>
			</li>
			<!--商品管理-->
			<li>
				<a th:href="forms-main.html">
					<i class="entypo-doc-text"></i>
					<span>商品管理</span>
				</a>
				<ul>
					<li>
						<a th:href="@{/api/goods}">
							<span>商品列表</span>
						</a>
					</li>
					<li>
						<a th:href="@{/api/categorys}">
							<span>分类列表</span>
						</a>
					</li>
					<li>
						<a th:href="@{/api/orders}">
							<span>订单列表</span>
						</a>
					</li>
				</ul>
			</li>
			<!--新闻管理-->
			<li>
				<a th:href="forms-main.html">
					<i class="entypo-doc-text"></i>
					<span>新闻管理</span>
				</a>
				<ul>
					<li>
						<a th:href="@{/api/news}">
							<span>新闻列表</span>
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="main-content">
		
<div class="row">
	
	<!-- Profile Info and Notifications -->
	<div class="col-md-6 col-sm-8 clearfix">
		
		<ul class="user-info pull-left pull-none-xsm">
		
						<!-- Profile Info -->
			<li class="profile-info dropdown"><!-- add class "pull-right" if you want to place this from right -->
				
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<img th:src="@{/picture/thumb-1-2x.png}" alt="" class="img-circle" width="44">
					Art Ramadani
				</a>
				
				<ul class="dropdown-menu">
					
					<!-- Reverse Caret -->
					<li class="caret"></li>
					
					<!-- Profile sub-links -->
					<li>
						<a th:href="extra-timeline.html">
							<i class="entypo-user"></i>
							Edit Profile
						</a>
					</li>
					
					<li>
						<a th:href="mailbox.html">
							<i class="entypo-mail"></i>
							Inbox
						</a>
					</li>
					
					<li>
						<a th:href="extra-calendar.html">
							<i class="entypo-calendar"></i>
							Calendar
						</a>
					</li>
					
					<li>
						<a href="#">
							<i class="entypo-clipboard"></i>
							Tasks
						</a>
					</li>
				</ul>
			</li>
		
		</ul>
				
		<ul class="user-info pull-left pull-right-xs pull-none-xsm">
			
			<!-- Raw Notifications -->
			<li class="notifications dropdown">
				
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<i class="entypo-attention"></i>
					<span class="badge badge-info">6</span>
				</a>
				
				<ul class="dropdown-menu">
					<li class="top">
	<p class="small">
		<a href="#" class="pull-right">Mark all Read</a>
		You have <strong>3</strong> new notifications.
	</p>
</li>

<li>
	<ul class="dropdown-menu-list scroller">
		<li class="unread notification-success">
			<a href="#">
				<i class="entypo-user-add pull-right"></i>
				
				<span class="line">
					<strong>New user registered</strong>
				</span>
				
				<span class="line small">
					30 seconds ago
				</span>
			</a>
		</li>
		
		<li class="unread notification-secondary">
			<a href="#">
				<i class="entypo-heart pull-right"></i>
				
				<span class="line">
					<strong>Someone special liked this</strong>
				</span>
				
				<span class="line small">
					2 minutes ago
				</span>
			</a>
		</li>
		
		<li class="notification-primary">
			<a href="#">
				<i class="entypo-user pull-right"></i>
				
				<span class="line">
					<strong>Privacy settings have been changed</strong>
				</span>
				
				<span class="line small">
					3 hours ago
				</span>
			</a>
		</li>
		
		<li class="notification-danger">
			<a href="#">
				<i class="entypo-cancel-circled pull-right"></i>
				
				<span class="line">
					John cancelled the event
				</span>
				
				<span class="line small">
					9 hours ago
				</span>
			</a>
		</li>
		
		<li class="notification-info">
			<a href="#">
				<i class="entypo-info pull-right"></i>
				
				<span class="line">
					The server is status is stable
				</span>
				
				<span class="line small">
					yesterday at 10:30am
				</span>
			</a>
		</li>
		
		<li class="notification-warning">
			<a href="#">
				<i class="entypo-rss pull-right"></i>
				
				<span class="line">
					New comments waiting approval
				</span>
				
				<span class="line small">
					last week
				</span>
			</a>
		</li>
	</ul>
</li>

<li class="external">
	<a href="#">View all notifications</a>
</li>				</ul>
				
			</li>
			
			<!-- Message Notifications -->
			<li class="notifications dropdown">
				
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<i class="entypo-mail"></i>
					<span class="badge badge-secondary">10</span>
				</a>
				
				<ul class="dropdown-menu">
					<li>
	<ul class="dropdown-menu-list scroller">
		<li class="active">
			<a href="#">
				<span class="image pull-right">
					<img th:src="@{/picture/thumb-1.png}" alt="" class="img-circle">
				</span>
				
				<span class="line">
					<strong>Luc Chartier</strong>
					- yesterday
				</span>
				
				<span class="line desc small">
					This ain’t our first item, it is the best of the rest.
				</span>
			</a>
		</li>
		
		<li class="active">
			<a href="#">
				<span class="image pull-right">
					<img th:src="@{/picture/thumb-2.png}" alt="" class="img-circle">
				</span>
				
				<span class="line">
					<strong>Salma Nyberg</strong>
					- 2 days ago
				</span>
				
				<span class="line desc small">
					Oh he decisively impression attachment friendship so if everything. 
				</span>
			</a>
		</li>
		
		<li>
			<a href="#">
				<span class="image pull-right">
					<img th:src="@{/picture/thumb-3.png}" alt="" class="img-circle">
				</span>
				
				<span class="line">
					Hayden Cartwright
					- a week ago
				</span>
				
				<span class="line desc small">
					Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
				</span>
			</a>
		</li>
		
		<li>
			<a href="#">
				<span class="image pull-right">
					<img th:src="@{/picture/thumb-4.png}" alt="" class="img-circle">
				</span>
				
				<span class="line">
					Sandra Eberhardt
					- 16 days ago
				</span>
				
				<span class="line desc small">
					On so attention necessary at by provision otherwise existence direction.
				</span>
			</a>
		</li>
	</ul>
</li>

<li class="external">
	<a th:href="mailbox.html">All Messages</a>
</li>				</ul>
				
			</li>
			
			<!-- Task Notifications -->
			<li class="notifications dropdown">
				
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
					<i class="entypo-list"></i>
					<span class="badge badge-warning">1</span>
				</a>
				
				<ul class="dropdown-menu">
					<li class="top">
	<p>You have 6 pending tasks</p>
</li>

<li>
	<ul class="dropdown-menu-list scroller">
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">Procurement</span>
					<span class="percent">27%</span>
				</span>
			
				<span class="progress">
					<span style="width: 27%;" class="progress-bar progress-bar-success">
						<span class="sr-only">27% Complete</span>
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">App Development</span>
					<span class="percent">83%</span>
				</span>
				
				<span class="progress progress-striped">
					<span style="width: 83%;" class="progress-bar progress-bar-danger">
						<span class="sr-only">83% Complete</span>
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">HTML Slicing</span>
					<span class="percent">91%</span>
				</span>
				
				<span class="progress">
					<span style="width: 91%;" class="progress-bar progress-bar-success">
						<span class="sr-only">91% Complete</span>
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">Database Repair</span>
					<span class="percent">12%</span>
				</span>
				
				<span class="progress progress-striped">
					<span style="width: 12%;" class="progress-bar progress-bar-warning">
						<span class="sr-only">12% Complete</span>
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">Backup Create Progress</span>
					<span class="percent">54%</span>
				</span>
				
				<span class="progress progress-striped">
					<span style="width: 54%;" class="progress-bar progress-bar-info">
						<span class="sr-only">54% Complete</span>
					</span>
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="task">
					<span class="desc">Upgrade Progress</span>
					<span class="percent">17%</span>
				</span>
				
				<span class="progress progress-striped">
					<span style="width: 17%;" class="progress-bar progress-bar-important">
						<span class="sr-only">17% Complete</span>
					</span>
				</span>
			</a>
		</li>
	</ul>
</li>

<li class="external">
	<a href="#">See all tasks</a>
</li>				</ul>
				
			</li>
		
		</ul>
	
	</div>
	
	
	<!-- Raw Links -->
	<div class="col-md-6 col-sm-4 clearfix hidden-xs">
		
		<ul class="list-inline links-list pull-right">
			
			<!-- Language Selector -->			<li class="dropdown language-selector">
				
				Language: &nbsp;
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
					<img th:src="@{/picture/flag-uk.png}">
				</a>
				
				<ul class="dropdown-menu pull-right">
					<li>
						<a href="#">
							<img th:src="@{/picture/flag-de.png}">
							<span>Deutsch</span>
						</a>
					</li>
					<li class="active">
						<a href="#">
							<img th:src="@{/picture/flag-uk.png}">
							<span>English</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img th:src="@{/picture/flag-fr.png}">
							<span>François</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img th:src="@{/picture/flag-al.png}">
							<span>Shqip</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img th:src="@{/picture/flag-es.png}">
							<span>Español</span>
						</a>
					</li>
				</ul>
				
			</li>
			
			<li class="sep"></li>
			
						
			<li>
				<a href="#" data-toggle="chat" data-animate="1" data-collapse-sidebar="1">
					<i class="entypo-chat"></i>
					Chat
					
					<span class="badge badge-success chat-notifications-badge is-hidden">0</span>
				</a>
			</li>
			
			<li class="sep"></li>
			
			<li>
				<a th:href="extra-login.html">
					Log Out <i class="entypo-logout right"></i>
				</a>
			</li>
		</ul>
		
	</div>
	
</div>

<hr>
			<ol class="breadcrumb bc-3">
						<li>
				<a th:href="index.html"><i class="entypo-home"></i>Home</a>
			</li>
					<li>
			
							<a th:href="ui-panels.html">UI Elements</a>
					</li>
				<li class="active">
			
							<strong>Blockquotes</strong>
					</li>
					</ol>
			
<h2>Modals Triggering</h2>

<br>


<div class="row">
	<div class="col-md-12">
		
		<div class="panel panel-primary">
			<div class="panel-heading">
				<div class="panel-title">Modals Examples</div>
			</div>

							<a href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: '@{'});" class="btn btn-default">Show Me</a>
		</div>
	</div>
</div>
<script type="text/javascript">
function showAjaxModal()
{
	jQuery('#modal-7').modal('show', {backdrop: '@{'});
	
	$.ajax({
		url: "data/ajax-content.txt",
		success: function(response)
		{
			jQuery('#modal-7 .modal-body').html(response);
		}
	});
}
</script><!-- Footer -->
</div>
	
	
</div>



<!-- Modal 6 (Long Modal)-->
<div class="modal fade" id="modal-6">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">Modal Content is Responsive</h4>
			</div>
			
			<div class="modal-body">
			
				<div class="row">
					<div class="col-md-6">
						
						<div class="form-group">
							<label for="field-1" class="control-label">Name</label>
							
							<input type="text" class="form-control" id="field-1" placeholder="John">
						</div>	
						
					</div>
					
					<div class="col-md-6">
						
						<div class="form-group">
							<label for="field-2" class="control-label">Surname</label>
							
							<input type="text" class="form-control" id="field-2" placeholder="Doe">
						</div>	
					
					</div>
				</div>
			
				<div class="row">
					<div class="col-md-12">
						
						<div class="form-group">
							<label for="field-3" class="control-label">Address</label>
							
							<input type="text" class="form-control" id="field-3" placeholder="Address">
						</div>	
						
					</div>
				</div>
			
				<div class="row">
					<div class="col-md-4">
						
						<div class="form-group">
							<label for="field-4" class="control-label">City</label>
							
							<input type="text" class="form-control" id="field-4" placeholder="Boston">
						</div>	
						
					</div>
					
					<div class="col-md-4">
						
						<div class="form-group">
							<label for="field-5" class="control-label">Country</label>
							
							<input type="text" class="form-control" id="field-5" placeholder="United States">
						</div>	
					
					</div>
					
					<div class="col-md-4">
						
						<div class="form-group">
							<label for="field-6" class="control-label">Zip</label>
							
							<input type="text" class="form-control" id="field-6" placeholder="123456">
						</div>	
					
					</div>
				</div>
			
				<div class="row">
					<div class="col-md-12">
						
						<div class="form-group no-margin">
							<label for="field-7" class="control-label">Personal Info</label>
							
							<textarea class="form-control autogrow" id="field-7" placeholder="Write something about yourself"></textarea>
						</div>	
						
					</div>
				</div>
				
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-info">Save changes</button>
			</div>
		</div>
	</div>
</div>


	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>

</body>
</html>